import {
  Button,
  Card,
  Col,
  Collapse,
  Flex,
  message,
  Row,
  Space,
  Tabs as TabList,
  Typography,
} from 'antd';
import { Link, useIntl, useLocation } from 'umi';

import down from '@/assets/produdct_donw.png';

import goodline from '@/assets/home_recommend.png';
import good from '@/assets/home_recommend.svg';
import nogoodline from '@/assets/home_unrecommend.png';
import nogood from '@/assets/home_unrecommend.svg';
import AuthButton from '@/components/AuthButton';
import { disSubGoodBtn, handleGoodBtn } from '@/services/center';
import { formatNumber, getNewUrl, jumpUrl, openUrl } from '@/utils';
import { btnStatusList } from '@/utils/common';
import { useGetToken } from '@/utils/request';
import { useState } from 'react';
import parser from 'react-html-parser';
import ApplyNowModal from '../Product/components/ApplyNowModal';
import CommentCard from '../Product/components/CommentCard';
import CommentModal from '../Product/components/CommentModal';
import './index.less';
type IProps = {
  item: Center.ProductList;
  index: number;
  data: any;
  mutate: any;
  listIndex?: string;
  codeList: Partial<
    Record<
      string,
      {
        builtin: number;
        code: Login.KeyCodeList;
        en_name: string;
        mo_name: string;
        name: string;
        value: string | number;
        id: number;
        parent: number;
      }[]
    >
  >;
};

const ProductCard: React.FC<IProps> = ({ index, item, data, mutate, listIndex, codeList }) => {
  const intl = useIntl();
  const { token } = useGetToken();
  const { pathname: pathnames } = useLocation();
  const pathname = pathnames.replace('/en', '') || '/';
  const isDetail = pathname == '/MerchantDetail';
  const [record, setRecord] = useState<Partial<Center.ProductList>>();
  const [visible, setVisible] = useState(false);
  const [commentModalVisible, setCommentModalVisible] = useState(false);

  const { disburseAverageTime: disburseAverageTimeList, orderListStatus: orderListStatusList } =
    codeList || {};
  const isEn = intl.locale == 'en-US';
  const tipsList = [
    {
      color: '#0065FD',
      bgColor: '#E4EFFF',
      label: 'home.x_special',
      key: isEn ? 'platformRebateEn' : 'platformRebate',
    },
    {
      color: '#FF8F00',
      bgColor: '#FFEFE8',
      label: '',
      key: isEn ? 'rebateEn' : 'rebate',
    },
  ];
  const [isFirst, setIsFirst] = useState(true);

  const keyList = [
    {
      key: 'loanAmountMax',
      title: 'home.max_loan_amount',
      formatFn: (value: number) => {
        return <div className="home_text_transparent">{formatNumber(value)}</div>;
      },
    },
    {
      key: 'loanTermMax',
      title: 'home.long_pay',
      formatFn: (value: number) => {
        return (
          <div style={{ color: '#0070DF' }}>
            {intl.formatMessage({ id: 'home.month' }, { num: value })}
          </div>
        );
      },
    },
    {
      key: 'yearInterestMin',
      title: 'home.low_year_rate',
      formatFn: (value: number) => `${value}%`,
    },
    {
      key: 'disburseAverageTime',
      title: 'home.exceed_time',
      formatFn: (value: number) =>
        disburseAverageTimeList?.find((item) => item.value == value)?.name,
    },
  ];

  // const renderItem = (value: any[]) => {
  //   return (
  //     <Row className="product_content_right_card_list" gutter={[0, 11]}>
  //       {value.length > 0 &&
  //         value?.map((item) => {
  //           const val = Object.prototype.toString.call(item) == '[object Object]' ? '' : item;
  //           return item ? (
  //             <Col className="product_content_right_card_list_item" key={item?.id || val} span={24}>
  //               <Flex align="flex-start" style={{ display: 'flex' }}>
  //                 <Col className="product_content_right_card_list_item_point" />
  //                 <Col style={{ flex: 1 }}>{item.profileName || val}</Col>
  //               </Flex>
  //             </Col>
  //           ) : null;
  //         })}
  //     </Row>
  //   );
  // };
  const handleItemcomand = async (obj: { id: number; value: number; type: 'good' | 'nogood' }) => {
    let newVal: any;
    let msg: any;
    if (!token) {
      jumpUrl('/login');
      return false;
    }
    const { id, value, type } = obj;
    try {
      if (value === 0) {
        if (type == 'nogood') {
          await disSubGoodBtn({ productId: id });
          newVal = '';
          msg = 'home.cancel_unrecommend_suc';
        } else {
          await handleGoodBtn({ productId: id, likeFlag: 1 });
          newVal = 1;
          msg = 'home.recommend_suc';
        }
      } else if (value === 1) {
        if (type == 'good') {
          await disSubGoodBtn({ productId: id });
          newVal = '';
          msg = 'home.cancel_recommend_suc';
        } else {
          await handleGoodBtn({ productId: id, likeFlag: 0 });
          newVal = 0;
          msg = 'home.unrecommend_suc';
        }
      } else {
        const val = type == 'good' ? 1 : 0;
        await handleGoodBtn({ productId: id, likeFlag: val });
        newVal = val;
        msg = val == 1 ? 'home.recommend_suc' : 'home.unrecommend_suc';
      }

      let newList = listIndex ? { ...data?.data } : [...data.data];

      if (listIndex) {
        newList[listIndex as any] = newList[listIndex as any].map((item: any) => {
          const { id: vId } = item;
          if (vId == id) {
            return {
              ...item,
              likeFlag: newVal,
            };
          }
          return item;
        });
      } else {
        newList = newList.map((item: any) => {
          const { id: vId } = item;

          if (vId == id) {
            return {
              ...item,
              likeFlag: newVal,
            };
          }
          return item;
        });
      }
      message.success(intl.formatMessage({ id: msg }));
      return { data: newList };
    } catch {
      return data;
    }
  };
  const {
    id,
    merchantLogo,
    merchantIntroduction: merchantIntroductionCn,
    merchantIntroductionEn,
    merchantId,
    productName: productNameCn,
    productNameEn,
    applyNum,
    passRate,
    productKey,
    productKeyEn,
    productScore,
    merchantName: merchantNameCn,
    merchantNameEn,
    likeFlag,
    // rebate,
    orderUserStatus,
    productOtherFeature: productOtherFeatureCn,
    productOtherFeatureEn,
    productApplyInfo: productApplyInfoCn,
    productApplyInfoEn,
    productType,
    reviewCount,
    unlikeRate,
    likeRate,
    reviews,
  } = item;
  const productOtherFeature = isEn ? productOtherFeatureEn : productOtherFeatureCn;

  const productApplyInfo = isEn ? productApplyInfoEn : productApplyInfoCn;

  const merchantIntroduction = isEn ? merchantIntroductionEn : merchantIntroductionCn;
  const merchantName = isEn ? merchantNameEn : merchantNameCn;
  const productName = isEn ? productNameEn : productNameCn;
  const newProdudctKey = isEn ? productKeyEn : productKey;
  const name = orderListStatusList?.find((item) => item.value == orderUserStatus)?.name;
  const { color, background } = btnStatusList(orderUserStatus) || {};
  const tabItem = [
    ...(productOtherFeature
      ? [
          {
            label: intl.formatMessage({ id: 'home.product_features' }),
            key: 'productFeature',
            children: (
              <div className="product_content_right_card_list">{parser(productOtherFeature)}</div>
            ),
          },
        ]
      : []),
    ...(productApplyInfo
      ? [
          {
            label: intl.formatMessage({ id: 'home.apply_data' }),
            key: 'data',
            children: (
              <div className="product_content_right_card_list">{parser(productApplyInfo)}</div>
            ),
          },
        ]
      : []),
    {
      label: (
        <div>
          {intl.formatMessage({ id: 'home.comment_word' })}({reviewCount})
        </div>
      ),
      key: 'comment',
      children: (
        <div style={{ marginTop: 14 }}>
          <Flex justify="space-between" style={{ marginBottom: 23, marginLeft: isEn ? 113 : 73 }}>
            <Button
              onClick={() => {
                if (!token) {
                  jumpUrl('/login');
                  return false;
                }
                setCommentModalVisible(true);
                setRecord(item);
              }}
              type="primary"
              style={{ minWidth: 120, height: 38 }}
            >
              {intl.formatMessage({ id: 'home.submit_comment_word' })}
            </Button>
            <Flex
              style={{
                color: '#666',
                fontWeight: 700,
                cursor: 'pointer',
                alignItems: 'flex-end',
              }}
              onClick={() => {
                if (!token) {
                  jumpUrl('/login');
                  return false;
                }
                const params = encodeURIComponent(
                  `id=${id}&productName=${productName}&name=${merchantName}&logo=${merchantLogo}&introduction=${merchantIntroduction}&score=${productScore}&productType=${productType}`,
                );
                openUrl(`/comment?${params}`);
              }}
            >
              {intl.formatMessage({ id: 'home.check_more' })}&gt;&gt;
            </Flex>
          </Flex>
          <CommentCard
            onDelete={(reviewId) => {
              let newList = listIndex ? { ...data?.data } : [...data.data];
              if (listIndex) {
                newList[listIndex as any] = newList[listIndex as any].map((item: any) => {
                  if (item.id == id) {
                    return {
                      ...item,
                      reviewCount: item.reviewCount - 1,
                      reviews: item.reviews.filter((item: any) => item.id !== reviewId),
                    };
                  }
                  return item;
                });
              } else {
                newList = newList.map((item: any) => {
                  if (item.id == id) {
                    return {
                      ...item,
                      reviewCount: item.reviewCount - 1,
                      reviews: item.reviews.filter((item: any) => item.id !== reviewId),
                    };
                  }
                  return item;
                });
              }
              mutate({ data: newList });
            }}
            data={reviews?.slice(0, 3)}
          />
        </div>
      ),
    },
  ];
  const newTipsList = tipsList.filter((v) => {
    const { key } = v;
    return item[key] && item[key] != '<p></p>';
  });
  const params = encodeURIComponent(
    `id=${merchantId}&productName=${productName}&name=${merchantName}&logo=${merchantLogo}&introduction=${merchantIntroduction}`,
  );
  return (
    <Col className="product_card" key={id} span={24}>
      <Card
        className="home_content_product_item_card"
        style={{ boxShadow: 'none' }}
        bordered={false}
      >
        {/* <Col className="home_content_product_item_mask" /> */}

        <Flex
          justify="space-between"
          style={{ padding: '12px 20px 12px 0' }}
          align="center"
          gap={20}
        >
          <Flex
            gap={6}
            align="center"
            style={{
              fontSize: 18,
              color: '#0F294D',
              fontWeight: 700,
              flex: 1,
              overflow: 'auto',
            }}
          >
            <Flex
              style={{
                fontSize: 14,
                color: '#aaa',
                background: '#F1F1F1',
                padding: '6.5px  13.5px',
                marginRight: 4,
              }}
              align="center"
              justify="center"
            >
              {index + 1}
            </Flex>

            <Typography.Text
              style={{ color: '#0F294D', fontSize: isEn ? 17 : 18 }}
              ellipsis={{
                tooltip: (
                  <div>
                    {merchantName}「{productName}」
                  </div>
                ),
              }}
            >
              {merchantName}「{productName}」
            </Typography.Text>
            {/* {rebate && rebate != '<p></p>' ? (
              <Flex
                align="center"
                gap={1}
                style={{
                  fontSize: isEn ? 14 : 16,
                  color: '#0270DF',
                  paddingLeft: 8,
                  marginRight: 8,
                  background: 'linear-gradient(90deg, #DEEEFF 0%, rgba(222, 238, 255, 0.2) 100%)',
                  whiteSpace: 'nowrap',
                }}
              >
                {intl.formatMessage({ id: 'home.cash_activity_word' })}
                <img src={require('@/assets/cash_activity.png')} width={20} />
              </Flex>
            ) : null} */}
            <Space size={9}>
              {newProdudctKey.split('\n').map((item: string) => {
                return (
                  <div
                    key={item}
                    style={{
                      background: '#F5F5F5',
                      color: '#666666',
                      margin: '10px 0',
                      fontSize: isEn ? 12 : 14,
                      fontWeight: 400,
                      whiteSpace: 'nowrap',
                    }}
                    className="product_content_right_card_tag"
                  >
                    {item}
                  </div>
                );
              })}
            </Space>
          </Flex>

          <Flex style={{ fontSize: isEn ? 12 : 14, whiteSpace: 'nowrap' }} align="center" gap={9}>
            <div
              style={{ background: '#FFEFE8', color: '#FF8F00' }}
              className="product_content_right_card_tag"
            >
              {intl.formatMessage({ id: 'home.send' }, { num: applyNum })}
            </div>
            <div
              style={{ background: '#E8F7FF', color: '#0065FD' }}
              className="product_content_right_card_tag"
            >
              <span style={{ fontWeight: 700 }}>
                {intl.formatMessage({ id: 'home.success_rate' })}
              </span>
              <span style={{ marginLeft: 5 }}>{passRate}%</span>
            </div>
          </Flex>
        </Flex>
        <div>
          {/* 数值 */}
          <Flex
            gap={0}
            style={{
              borderTop: '1px solid #EEEEEE',
              borderBottom: '1px solid #EEEEEE',
            }}
            align="center"
          >
            <Flex>
              <>
                {isDetail ? (
                  <Flex
                    style={{
                      padding: '0 15px',
                      marginBottom: 10,
                      cursor: isDetail ? 'auto' : 'pointer',
                    }}
                    onClick={() => {
                      if (isDetail) {
                        return false;
                      }
                    }}
                  >
                    <img
                      className="img_animation"
                      style={{ width: 120, maxHeight: 50 }}
                      src={merchantLogo}
                    />
                  </Flex>
                ) : (
                  <Link
                    className="product_card_img_content"
                    to={getNewUrl(`/MerchantDetail?${params}`)}
                    target="_blank"
                  >
                    <Flex
                      style={{
                        padding: '0 15px',
                        marginBottom: 10,
                        cursor: isDetail ? 'auto' : 'pointer',
                      }}
                      onClick={() => {
                        if (isDetail) {
                          return false;
                        }
                      }}
                    >
                      <img
                        className="img_animation"
                        style={{ width: 120, maxHeight: 50 }}
                        src={merchantLogo}
                      />
                    </Flex>
                  </Link>
                )}
              </>
            </Flex>
            <Flex
              className="product_card_info"
              style={{
                borderLeft: '1px solid #EEEEEE',
                borderRight: '1px solid #EEEEEE',
                padding: isEn ? '20px 0' : '20px 53px',
                flex: 1,
              }}
              gap={isEn ? 0 : 50}
              justify={isEn ? 'space-around' : 'space-between'}
            >
              {keyList.map((v) => {
                const { key, title, formatFn } = v;
                return (
                  <div key={key}>
                    <div
                      style={{
                        fontSize: 26,
                        fontWeight: 700,
                        lineHeight: '30px',
                        marginBottom: 9,
                        whiteSpace: 'nowrap',
                      }}
                    >
                      {formatFn(item[key]) || '/'}
                    </div>
                    <div
                      style={{
                        fontSize: 12,
                        color: '#999',
                        fontWeight: 700,
                      }}
                    >
                      {intl.formatMessage({ id: title })}
                    </div>
                  </div>
                );
              })}
            </Flex>
            <Flex className="product_card_btn" style={{ padding: '0 50px ' }}>
              {pathname == '/' ? (
                <AuthButton
                  type="primary"
                  onClick={() => {
                    jumpUrl(`/product?id=${id}&productType=${productType}`, { productType });
                  }}
                  className="product_content_right_card_btn product_content_right_card_now"
                >
                  <Space size={0}>
                    <Flex style={{ marginBottom: isEn ? 4 : 0 }} align="center">
                      {intl.formatMessage({ id: 'home.apply_now' })}
                    </Flex>
                    <div className="product_content_right_card_now_bg" />
                  </Space>
                </AuthButton>
              ) : orderUserStatus ? (
                <AuthButton
                  type="text"
                  className="product_content_right_card_btn"
                  style={{ backgroundColor: background }}
                >
                  <Typography.Text
                    style={{ color, fontSize: 16, maxWidth: 136 }}
                    ellipsis={{ tooltip: name }}
                  >
                    {name}
                  </Typography.Text>
                </AuthButton>
              ) : (
                <AuthButton
                  type="primary"
                  onClick={() => {
                    setVisible(true);
                    setRecord(item);
                  }}
                  className="product_content_right_card_btn product_content_right_card_now"
                >
                  <Space size={0}>
                    <Flex style={{ marginBottom: isEn ? 4 : 0 }} align="center">
                      {intl.formatMessage({ id: 'home.apply_now' })}
                    </Flex>
                    <div className="product_content_right_card_now_bg" />
                  </Space>
                </AuthButton>
              )}
            </Flex>
          </Flex>
          {/* 评分 */}

          {/* 信息 */}
          <div style={{ position: 'relative' }} className="product_content_right_card_main">
            <Collapse
              collapsible="icon"
              expandIconPosition="right"
              expandIcon={({ isActive }) => {
                const bottom = isActive ? -40 : 12;

                return (
                  <>
                    <Flex justify="space-between" align="center">
                      <Flex
                        align="center"
                        style={{
                          position: 'absolute',
                          left: 20,
                          bottom,
                          zIndex: 5,
                          cursor: 'auto',
                        }}
                        onClick={(e) => {
                          e.stopPropagation();
                        }}
                        gap={4}
                        className="home_content_product_item_star"
                      >
                        <div
                          style={{ padding: '0 5.5px', lineHeight: '20px' }}
                          className="product_content_right_card_score"
                        >
                          <span style={{ fontWeight: 700, fontSize: 12 }}>{productScore}/</span>
                          <span style={{ opacity: 0.9, fontSize: 12 }}>5</span>
                        </div>
                        <div
                          style={{
                            color: '#666',
                            margin: '0 10px',
                            cursor: 'auto',
                          }}
                        >
                          (
                          {
                            <span
                              className="text_blue"
                              style={{ cursor: 'pointer', marginRight: 4 }}
                              onClick={() => {
                                const params = encodeURIComponent(
                                  `id=${id}&productName=${productName}&name=${merchantName}&logo=${merchantLogo}&introduction=${merchantIntroduction}&score=${productScore}&productType=${productType}`,
                                );
                                openUrl(`/comment?${params}`);
                              }}
                            >
                              {reviewCount}
                            </span>
                          }
                          {intl.formatMessage({
                            id: isEn
                              ? reviewCount > 1
                                ? 'home.comment'
                                : 'home.comment1'
                              : 'home.comment',
                          })}
                          )
                        </div>
                        <Flex gap={2} style={{ color: '#666', cursor: 'auto' }} align="center">
                          <Flex align="center" className={likeFlag === 1 && !isFirst ? 'good' : ''}>
                            <img width={18} height={18} src={likeFlag === 1 ? good : goodline} />
                            {likeFlag === 1 && !isFirst ? <div className="good_point" /> : null}
                          </Flex>
                          <div>
                            <span style={{ fontWeight: 700, fontSize: 16 }}>{likeRate * 100}%</span>
                            <span
                              onClick={async () => {
                                mutate(
                                  (await handleItemcomand({
                                    id,
                                    value: likeFlag,
                                    type: 'good',
                                  })) as any,
                                );
                                setIsFirst(false);
                              }}
                              style={{
                                cursor: 'pointer',
                                color: likeFlag === 1 ? '#0070df' : '#666',
                                transition: 'color .5s',
                                marginLeft: 2,
                              }}
                              className="text_blue"
                            >
                              {intl.formatMessage({ id: 'home.recommend' })}
                            </span>
                          </div>
                        </Flex>
                        <Flex
                          gap={2}
                          style={{ color: '#666', marginLeft: 5, cursor: 'auto' }}
                          align="center"
                        >
                          <img
                            style={{ color: '#fff' }}
                            width={18}
                            height={18}
                            src={likeFlag === 0 ? nogood : nogoodline}
                          />
                          <div>
                            <span style={{ fontWeight: 700, fontSize: 16 }}>
                              {unlikeRate * 100}%
                            </span>
                            <span
                              className="text_blue"
                              onClick={async () => {
                                mutate(
                                  (await handleItemcomand({
                                    id,
                                    value: likeFlag,
                                    type: 'nogood',
                                  })) as any,
                                );
                              }}
                              style={{
                                cursor: 'pointer',
                                color: likeFlag === 0 ? '#0070df' : '#666',
                                transition: 'color .5s',
                                marginLeft: 2,
                              }}
                            >
                              {intl.formatMessage({ id: 'home.unrecommend' })}
                            </span>
                          </div>
                        </Flex>
                      </Flex>
                      <Space
                        style={{
                          position: 'absolute',
                          right: 20,
                          bottom,
                          zIndex: 5,
                          color: '#666',
                        }}
                        className="text_blue"
                      >
                        <div>
                          {intl.formatMessage({
                            id: isActive ? 'home.hide_info' : 'home.product_info',
                          })}
                        </div>
                        <Flex className="product_content_right_card_circle ">
                          <svg
                            className={`product_content_right_card_icon ${isActive ? '' : 'rote'}`}
                            width="10"
                            height="6"
                            viewBox="0 0 10 6"
                            fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M5 2.18557e-07L3.97059 1.02439L-2.17491e-07 4.97561L1.02941 6L5 2.04878L8.97059 6L10 4.97561L6.02941 1.02439L5 2.18557e-07Z"
                              fill="currentColor"
                            />
                          </svg>
                        </Flex>
                      </Space>
                    </Flex>
                  </>
                );
              }}
              ghost
            >
              <Collapse.Panel
                style={{ padding: '0 20px' }}
                key={1}
                header={<div style={{ padding: '12px 0', minHeight: 46 }} />}
              >
                {/* 平台返利和机构活动 */}

                <Row gutter={[0, 20]}>
                  {newTipsList.map((v, index) => {
                    const { color, bgColor, key, label } = v;
                    return (
                      <Col
                        className="product_content_right_card_tip"
                        style={{
                          backgroundColor: bgColor,
                          borderLeft: `3px solid ${color}`,
                          paddingLeft: 0,
                        }}
                        key={label}
                      >
                        <Col className="product_content_right_card_tip_content">
                          <Flex
                            align="center"
                            style={{
                              padding: '5px  66px 5px 24px',
                              marginBottom: 9,
                              fontSize: 16,
                              fontWeight: 700,
                              display: 'inline-flex',
                              color,
                              background:
                                'linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.05) 100%)',
                            }}
                            gap={6}
                          >
                            <img
                              src={require(`@/assets/${index == 0 ? 'b' : 'o'}_gift.png`)}
                              width={18}
                              height={18}
                            />
                            <div>
                              {label ? (
                                intl.formatMessage({ id: label })
                              ) : (
                                <>
                                  {merchantName}
                                  {intl.formatMessage({
                                    id: 'home.promotional_activity',
                                  })}
                                </>
                              )}
                            </div>
                          </Flex>
                          <div style={{ paddingLeft: 20 }}>
                            <Typography.Paragraph
                              style={{ marginBottom: 0 }}
                              ellipsis={{
                                rows: 4,
                                expandable: 'collapsible',
                                symbol(expanded) {
                                  return (
                                    <img
                                      src={down}
                                      width={10}
                                      height={10}
                                      className={`product_content_right_card_icon ${
                                        expanded ? 'rote' : ''
                                      }`}
                                    />
                                  );
                                },
                              }}
                            >
                              {parser(item[key])}
                            </Typography.Paragraph>
                          </div>
                        </Col>
                      </Col>
                    );
                  })}
                </Row>

                {/* 产品特色 */}
                <TabList
                  style={{
                    margin: newTipsList.length > 0 ? '24px 0 54px' : '-10px 0 54px',
                  }}
                  items={tabItem}
                  className="product_content_right_card_tabs"
                />
              </Collapse.Panel>
            </Collapse>
          </div>
        </div>
      </Card>

      <ApplyNowModal
        visible={visible}
        data={record || {}}
        handleCancel={() => {
          setVisible(false);
          setRecord({});
        }}
      />

      <CommentModal
        visible={commentModalVisible}
        onCancel={() => {
          setCommentModalVisible(false);
        }}
        handleOk={() => {
          // 需要审核
          setCommentModalVisible(false);
          // const { productId, ...rest } = value;
          // let newList = listIndex ? { ...data?.data } : [...data.data];
          // if (listIndex) {
          //   newList[listIndex as any] = newList[listIndex as any].map((item: any) => {
          //     const { id, reviewCount, reviews } = item;

          //     if (productId == id) {
          //       return {
          //         ...item,
          //         reviewCount: reviewCount + 1,
          //         reviews: [rest, ...reviews],
          //       };
          //     }
          //     return item;
          //   });
          // } else {
          //   newList = newList.map((item: any) => {
          //     const { id, reviewCount, reviews } = item;

          //     if (productId == id) {
          //       return {
          //         ...item,
          //         reviewCount: reviewCount + 1,
          //         reviews: [rest, ...reviews],
          //       };
          //     }
          //     return item;
          //   });
          // }

          // mutate({ data: newList });
        }}
        data={record || {}}
      />
    </Col>
  );
};

export default ProductCard;
